{% extends 'teacherTemp.html' %}

{% block content %}
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-body py-3">
            <form class="row row-cols-sm-auto g-3 align-items-center" method="get">
                <div class="col-12">
                    <div class="row">
                        <div class="col">
                            <input type="text" class="form-control" id="name" name="q" placeholder="搜索学生姓名" value="{{ seach_list }}">
                        </div>
                    </div>
                </div>

                <div class="col-12 gap-2">

                    <button type="submit" class="btn btn-light bsa-querySearch-btn">
                        <i class="bi bi-search"></i>搜索
                    </button>
                    <button type="submit" class="btn btn-light bsa-reset-btn" onclick="resetInput()">
                        <i class="bi bi-arrow-clockwise"></i>重置
                    </button>
                </div>

            </form>
        </div>


        <div class="bs-example" data-example-id="panel-without-body-with-table">
            <div class="panel panel-default">
              <div class="card-body">
                <h3>{{ title }}</h3>
                <div id="toolbar" class="d-flex flex-wrap gap-2 mb-2">
                    <button class="btn btn-light add-btn"><i
                            class="bi bi-plus"></i> 发布
                    </button>
                </div>


                <table class="table table-bordered table-condensed table1" style="text-align: center">
                    <h3>发布情况:</h3>
                    <thead>
                    <tr class="student-test">
                        <th>ID</th>
                        <th>发起人</th>
                         <th>发布时间</th>
                        <th>教学反馈内容</th>
                        <th>教学评价内容</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for i in rmation_dest %}
                        <tr>
                            <td>{{ i.id }}</td>
                            <td>{{ i.teacherRmation }}</td>
                            <td>{{ i.Releasetime }}</td>
                            <td>{{ i.Texts }}</td>
                            <td>{{ i.rmation }}</td>
                            <td>
                                <button type="button" class="btn btn-danger btn-sm btn-delete" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="删除" uid="{{ i.id }}">删除</button>
                            </td>
                        </tr>
                    {% endfor %}

                    </tbody>
                </table>
              <table class="table table-bordered table-condensed table1" style="text-align: center">
              <h3>学生填写情况:</h3>
                    <thead>
                    <tr class="rmation-test">
                        <th>
                            多选框
                        </th>
                        <th>ID</th>
                        <th>学生姓名</th>
                        <th>学号</th>
                        <th>性别</th>
                        <th>教学反馈内容</th>
                        <th>教学评价内容</th>
                        <th>填写时间</th>
                        <th>班主任</th>
                        <th>审核状态</th>
                        <th>管理员审批状态</th>
                        <th>管理员</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for i in student_dest %}
                        <tr>
                            <td>
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
                                    </label>
                                </div>
                            </td>
                            <td>{{ i.id }}</td>
                            <td>{{ i.StudentName }}</td>
                            <td>{{ i.age }}</td>
                            <td>{{ i.get_sex_display }}</td>
                            <td>{{ i.Texts }}</td>
                            <td>{{ i.rmation }}</td>
                            <td>{{ i.Filltime }}</td>
                            <td>{{ i.teacherRmation }}</td>
                        <td  style="text-align: center">
                                {% if  i.get_tables_display == "已审核" %}
                                      <span class="badge text-bg-success">{{ i.get_tables_display }}</span>
                                {% else %}
                                    <span class="badge text-bg-danger">{{ i.get_tables_display }}</span>
                                {% endif %}
                            </td>
                            <td  style="text-align: center">
                                {% if  i.get_examRmation_display == "已审批" %}
                                      <span class="badge text-bg-success">{{ i.get_examRmation_display }}</span>
                                {% elif i.get_examRmation_display == "待审批" %}
                                    <span class="badge text-bg-primary">{{ i.get_examRmation_display }}</span>
                                {% else %}
                                    <span class="badge text-bg-danger">{{ i.get_examRmation_display }}</span>
                                {% endif %}
                            </td>
                            <td>{{ i.adminRmation }}</td>
                            <td>
                                <button type="button" id="btnEdit" class="btn btn-primary btn-sm edit-btn" data-toggle="modal" data-target="#myModal" uid="{{ i.id }}">审核</button>
{#                                <button type="button" class="btn btn-danger btn-sm btn-delete" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="删除" uid="{{ i.id }}">删除</button>#}
                            </td>
                        </tr>
                    {% endfor %}

                    </tbody>
                </table>
            </div>
        </div>
        <ul class="pagination" style="margin: 0px 16px">
            {{ page_string }}
        </ul>
    </div>

    </div>
    </div>


{% endblock content %}
{% block test %}
    {#  删除  对话框  #}
    <div class="modal fade modal-body2" id="deleteModal" tabindex="-1" role="dialog" data-backdrop="false"
         aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="alert alert-danger alert-dismissible" role="alert"
                     style="margin-bottom: 0px;">
                    <h4>是否确定删除!</h4>
                    <p style="padding: 10px 2px;">如果删除的话，相关关联的数据也会被删除掉.</p>
                    <p style="text-align: right;">
                        <button id="bindConfirmDelete" type="button" class="btn btn-danger">确 定</button>
                        <button type="button" class="btn btn-default" data-bs-dismiss="modal">取 消</button>
                    </p>
                </div>
            </div>
        </div>
    </div>
    {#  新建   #}
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" data-backdrop="false"
         aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <form style="margin: 10px 10px" id="addform">
                    <div class="modal-body">
                        <div class="clearfix">
                            {% for em in form_data %}
                                <div class="col-xs-12">
                                    <div class="form-group" style="position: relative;margin-bottom:15px;">
                                        <label>{{ em.label }}:</label>
                                        {{ em }}
                                        <span style="color:red;position: absolute;" class="err-img"></span>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </form>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default btn3" data-bs-dismiss="modal">关 闭</button>
                    <button type="button" class="btn btn-primary btn1">提 交</button>
                </div>
            </div>
        </div>
    </div>
{#    发布#}
    <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" data-backdrop="false"
         aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <form style="margin: 10px 10px" id="addform2">
                    <div class="modal-body">
                        <div class="clearfix">
                            {% for em in test_data %}
                                <div class="col-xs-12">
                                    <div class="form-group" style="position: relative;margin-bottom:15px;">
                                        <label>{{ em.label }}:</label>
                                        {{ em }}
                                        <span style="color:red;position: absolute;" class="err-img"></span>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </form>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default btn3" data-bs-dismiss="modal">关 闭</button>
                    <button type="button" class="btn btn-primary btn2">提 交</button>
                </div>
            </div>
        </div>
    </div>

{% endblock test %}


{% block js %}
    <script>
        //页面加载完成自动执行
        var EDIT_ID;
        var DELETE_ID;
        $(function () {
            bindBtn();
            btnAdd();
            btnEdit();
            bindAddBtn()
            resetInput();
            {#发布任务删除#}
            btndRemationDeleteEvent();
            bindRemationConfirmDeleteEvent();

        });

        //显示框
        function btnAdd() {
            $('.add-btn').click(function () {

                //清空对话框里的内容
                $('#addform2')[0].reset();
                //修改标题
                $('.modal-title').text('发布教学评价任务');
                //显示新建订单框
                $('#myModal2').modal('show');
            })
        };

        //根据判断发送对应的请求
        function bindBtn() {
            $('.btn1').click(function () {
                //清除错误信息
                $('.err-img').empty();

                    //编辑
                btnEditSave();

            })
        }
         function bindAddBtn() {
            $('.btn2').click(function () {
                //清除错误信息
                $('.err-img').empty();
                doAdd();

            })
        }




        //显示编辑框
        function btnEdit() {
            $('.edit-btn').click(function () {
                //清空表单  $('#addform')是jquery对象  $('#addform')[0]是DOM对象
                $('#addform')[0].reset();
                var uid = $(this).attr('uid');
                EDIT_ID = uid;
                //发生ajax请求到后台
                $.ajax({
                    url: '/teacher/rmation/StudentRmationGET/',
                    type: 'GET',
                    data: {
                        uid: uid,
                    },
                    dataType: 'JSON',
                    success: function (res) {
                        if (res.static) {
                            $.each(res.data, function (name, value) {
                                $("#id_" + name).val(value);
                            })
                            //修改编辑标题
                            $('.modal-title').text('教师审核窗口');
                            //显示对话框
                            $('#myModal').modal('show');
                        } else {
                            alert(res.error);
                        }

                    }
                })
            });
            // 监听模态框打开事件
            $('#myModal').on('shown.bs.modal', function () {
                addOverlay();
            });

            //  监听模态框关闭并关闭遮罩层
            $(document).on("hidden.bs.modal", "#myModal", function () {
                $("#myModal-modal-backdrop").remove();
                $(this).off("hide.bs.modal"); // 移除模态框关闭事件的监听器
            });
        };
        // 添加遮罩层
        function addOverlay() {
            if ($('#myModal-modal-backdrop').length === 0) {
                var modalDialog = $('#myModal .modal-dialog');
                var overlay = $('<div class="modal-overlay" id="myModal-modal-backdrop"></div>');
                modalDialog.after(overlay);
            }
        }

        //向后端发送新建请求
         function doAdd() {
            //向后台发送ajax请求
            $.ajax({
                url: '/teacher/rmation/add/',
                type: 'post',
                data: $('#addform2').serialize(),
                dataType: 'JSON',
                success: function (res) {
                    if (res.static) {
                        alert('发布成功');
                        //清空表单  $('#addform')是jquery对象  $('#addform')[0]是DOM对象
                        $('#addform2')[0].reset();
                        //关闭模拟框
                        $('#myModal2').modal('hide');
                        //刷新页面
                        location.reload();
                    } else {
                        {#遍历错误信息#}
                        $.each(res.error, function (name, data) {
                            $("#id_" + name).next().text(data[0])
                        })
                    }
                }
            })
        };

          //向后端发送编辑请求
        function btnEditSave() {
                $.ajax({
                     url: '/teacher/rmation/StudentRmation/'+'?uid='+EDIT_ID,
                     type: 'post',
                     data:$('#addform').serialize(),
                     dataType: 'JSON',
                     success: function (res) {
                          if (res.static){
                              //清空表单
                              $('#addform')[0].reset();
                              //关闭对话框
                              $('#myModal').modal('hide');
                              //刷新页面
                              location.reload();
                          }else{
                              if(res.tpis){
                                  alert(res.tpis)
                              }else{
                                  //将错误信息在页面显示
                                  $.each(res.error,function (name,data) {
                                        $('#id'+name).next().text(data[0])
                                  })
                              }
                          }
                     }
                 })
         };
        //删除
        function btndRemationDeleteEvent() {
            $('.btn-delete').click(function () {
                //alert('点击删除了');
                //显示删除框
                $('#deleteModal').modal('show');

                //获取对应行id并赋值给全部变量
                DELETE_ID = $(this).attr('uid');
            })
        };


        //向后端发送删除请求
        function bindRemationConfirmDeleteEvent() {
            $('#bindConfirmDelete').click(function () {
                //点击确定按钮，将id发送给后台
                $.ajax({
                    url: '/teacher/rmation/Rmationdelete/',
                    type: 'GET',
                    data: {
                        uid: DELETE_ID,
                    },
                    dataType: 'JSON',
                    success: function (res) {
                        if (res.static) {
                            //删除成功并刷新页面
                            location.reload();
                        } else {
                            //删除失败
                            alert(res.error);
                        }

                    }
                })
            })


        };



         //重置页面
        function resetInput() {
          document.getElementById("name").value = "";
        }


    </script>
{% endblock js %}